<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 只允许有一个根元素,一般id取名为app -->
  <div id="app">
    <h2>模板语法</h2>
    <!-- 文本插值就是允许我们在html里面使用双大括号，来显示data选项里面的变量 -->
    <!-- 双大括号里面，除了undefined和null，其他的常见的变量都是会先转成字符串再显示 -->
    <!-- 双大括号除了变量名，还可以写表达式 -->
    <!-- 变量，加减乘除，字符串拼接，三元运算，对象或者数组的点操作符或者中括号操作符，函数调用等，if和for不行，它们是语句 -->
    <p>count: {{ count }}</p>
    <p>msg: {{ msg }}</p>
    <p>done: {{ done }}</p>
    <p>udf: {{ udf }}</p>
    <p>nl: {{ nl }}</p>
    <p>arr: {{ arr.reverse() }}</p>
    <p>arr: {{ arr[0] }}</p>
    <p>obj: {{ obj["a"] }}</p>
    <p>obj: {{ obj.a }}</p>
    <!-- 默认情况下，双大括号是不会自动解析标签的 -->
    <div>{{ bq }}</div>
    <!-- v-开头的再vue里面表示指令，v-html就会将字符串解析成标签显示 -->
    <div v-html="bq"></div>
  </div>

  <!-- 引入vue的文件 -->
  <script src="../vue3.js"></script>
  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          msg: "hello",
          count: 1,
          done: true,
          udf: undefined,
          nl: null,
          arr: [1,2,3],
          obj: {a:3,b:4},
          bq: "<h1>我是标题</h1>"
        }
      }
    }).mount("#app");

  
  </script>
</body>
</html>